<template>
    <div class="page">
        <div class="page-content-header">
            <PageHeader :title="title">
                <template #right>
                    <el-link type="primary" @click="handleAdd">新增字典类型</el-link>
                </template>
            </PageHeader>
        </div>
        <div class="page-bod">
            <div class="page-search">
                <el-form :model="data.search" label-width="100px" label-position="top">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item>
                                <el-input v-model="data.search.search" placeholder="请输入关键词" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-select v-model="data.search.is_active" placeholder="请选择是否启用">
                                    <el-option label="是" value="1" />
                                    <el-option label="否" value="0" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <div class="flsc">
                                <el-button type="primary" @click="search">搜索</el-button>
                                <el-button type="info" @click="reset">重置</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="page-table">
                <TableModel ref="fatherTableRef" :table-data="data.tableData" :total="data.total" :page="data.page.page"
                    :page-size="data.page.size" @change-page="getList" :min-height="200" :open-click="true"
                    :id="dict.page.id" @change-id="changeId">
                    <el-table-column type="index" width="80" label="序号" />
                    <el-table-column prop="name" label="名称" />
                    <el-table-column prop="code" label="编码" />
                    <el-table-column prop="is_active" label="是否启用" :formatter="formatIsActive" />
                    <el-table-column prop="sort_order" label="排序" />
                    <el-table-column prop="created_at" label="创建时间" :formatter="formatTime" />
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <el-link class="mr20" type="primary" @click="handleEdit(scope.row)">编辑</el-link>
                            <el-link type="danger" @click="handleDelete(scope.row)">删除</el-link>
                        </template>
                    </el-table-column>
                </TableModel>
            </div>
            <div class="page-table active">
                <div class="flec table2-header">
                    <el-button type="primary" @click="handleDictItemAdd" :disabled="!dict.page.id">新增</el-button>
                </div>
                <TableModel :table-data="dict.tableData" :total="dict.total" :page="dict.page.page"
                    :page-size="dict.page.size" @change-page="getDictList" :min-height="200">
                    <el-table-column type="index" width="80" label="序号" />
                    <el-table-column prop="label" label="键" />
                    <el-table-column prop="value" label="值" />
                    <el-table-column prop="is_active" label="是否启用" :formatter="formatIsActive" />
                    <el-table-column prop="sort_order" label="排序" />
                    <el-table-column prop="created_at" label="创建时间" :formatter="formatTime" />
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <el-link class="mr20" type="primary" @click="handleDictItemEdit(scope.row)">编辑</el-link>
                            <el-link type="danger" @click="handleDictItemDelete(scope.row)">删除</el-link>
                        </template>
                    </el-table-column>
                </TableModel>
            </div>
        </div>
        <DictType ref="dictTypeRef" @success="getList" />
        <DictItem ref="dictItemRef" @success="getDictList" />
    </div>
</template>

<script setup>
import PageHeader from '@/components/page-header/index.vue'
import { dictTypePage, dictTypeDelete, dictItemPage, dictItemDelete } from '@/api/dict'
import dayjs from 'dayjs'
import { useMessage } from '@/hooks/useMessage'
import DictType from './components/dictType.vue'
import TableModel from '@/components/tableModel/index.vue'
import DictItem from './components/dictItem.vue'
const route = useRoute()
const title = ref(route.meta.title)
const message = useMessage()
const dictTypeRef = ref(null)
const fatherTableRef = ref(null)
const dictItemRef = ref(null)
const data = reactive({
    search: {
        is_active: undefined,
        search: '',
    },
    page: {
        page: 1,
        size: 10,
    },
    tableData: [],
    total: 0,
})
const formatTime = (row, column) => {
    return dayjs(row[column.property]).format('YYYY-MM-DD HH:mm:ss')
}
const formatIsActive = (row) => {
    return row.is_active ? '是' : '否'
}
const search = () => {
    data.page.page = 1
    data.page.size = 10

    getList()
}
const reset = () => {
    data.search = {
        is_active: undefined,
        search: '',
    }
    data.page = {
        page: 1,
        size: 10,
    }
    search()
}
const getList = async () => {
    const params = {
        ...data.page,
    }

    for (const key in data.search) {
        if (data.search[key] !== undefined && data.search[key] !== '' && data.search[key] !== null) {
            params[key] = data.search[key]
        }
    }
    const res = await dictTypePage(params)
    if (res.code === 200) {
        data.tableData = res.data.list
        data.total = res.data.total
        if (res.data.list.length > 0) {
            dict.page.id = res.data.list[0].id
            getDictList()
            fatherTableRef.value.handleCurrent(res.data.list[0])
        }
    }
}

const handleEdit = (row) => {
    dictTypeRef.value.open('edit', row)
}
const handleDelete = async (row) => {
    await message.confirmMessage('确定删除该用户吗？')
    const res = await dictTypeDelete({ id: row.id })
    if (res.code === 200) {
        message.alertMessage('删除成功', 'success')
        getList()
    }
}

const handleAdd = () => {
    dictTypeRef.value.open('add')
}

const changeId = (id) => {
    dict.page.id = id
    getDictList()
}

const handleDictItemAdd = () => {
    dictItemRef.value.open('add', dict.page.id)
}

const handleDictItemEdit = (row) => {
    dictItemRef.value.open('edit', dict.page.id, row)
}

const handleDictItemDelete = async (row) => {
    await message.confirmMessage('确定删除该字典吗？')
    const res = await dictItemDelete({ id: row.id })
    if (res.code === 200) {
        message.alertMessage('删除成功', 'success')
        getDictList()
    }
}


const dict = reactive({
    page: {
        id: null,
        page: 1,
        size: 10,
    },
    tableData: [],
    total: 0,
})

const getDictList = async () => {
    const res = await dictItemPage({
        dict_type_id: dict.page.id,
        ...dict.page,
    })
    if (res.code === 200) {
        dict.tableData = res.data.list
        dict.total = res.data.total
    }
}

onMounted(() => {
    reset()
})
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    height: 100%;
}

.page-content {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f7ff 0%, #ddeaf5 100%);
    border-radius: 10px;
}

.page-content-header {
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
}

.page-body {
    width: 100%;
    height: calc(100% - 80px);
}


.page-search {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 2px;
}

.page-table {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 18px;

    &.active {
        margin-top: 2px;
    }

    .table2-header {
        width: 100%;
        margin-bottom: 10px;
    }
}
</style>